<template>
	<div class="swiperbox">
		<swiper :options="swiperOption">
			<swiper-slide v-for="(item,index) in swipers"><img @click="openhid(index)" :src="'http://118.24.83.96:80/wojuAdmin/public/uploads/'+item+'.jpg'"></swiper-slide>
		</swiper>
		<div class="swiper-pagination"></div>
		<div class="swiper-top">
			<div @click='backs'><i class="fa fa-angle-left"></i></div>
			<div>
				<i @click="itemshow" class="heart"></i>
				<span @click="collect" class="more"></span>
			</div>
		</div>
		<div class="setitem" v-if="itemflag">
			<span></span>
			<p @click="touser"><i></i><span>会员中心</span></p>
			<p @click="openserch"><i></i><span>搜索</span></p>
			<p @click="toindex"><i></i><span>写字楼出租</span></p>
			<p @click="toindex"><i></i><span>蜗居首页</span></p>
			<p @click="tolist"><i></i><span>帮你找房</span></p>
		</div>
		<mymask v-if="open" @getChildrenflag="seting" :btn="mydate.btn"></mymask>
		<div class="partbox" v-if="swiperflag">
			<div class="closeimg"><i @click="swiperflag=false"></i></div>
			<div class="imgswiper">
				<swiper :options="swiperOption1">
					<swiper-slide v-for="(item,index) in swiperlist"><img @click="readindex(index)" :src="item"></swiper-slide>
				</swiper>
			</div>
			<div class="imgfooter">
				<span>线外城市</span>
			</div>
		</div>
	</div>
</template>

<script>
	import 'swiper/dist/css/swiper.css'
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	import mymask from '@/components/public/mymask'
	export default {
		data() {
			return {
				sindex:0,
				indexnum:0,
				swiperflag:false,
				swiperlist:["../../../../static/imgage/swiper1.jpg","../../../../static/imgage/swiper2.jpg","../../../../static/imgage/swiper3.jpg","../../../../static/imgage/swiper4.jpg"],
				mydate:{
					btn:['','取消']
				},
				open:false,
				//设置属性
				swiperOption: {
					//显示分页
					pagination: {
						el: '.swiper-pagination',
						clickable: true
					},
					//切换模式  横屏或者竖屏
					// direction : 'vertical',
					//设置自动播放速度
					autoplay: {
						disableOnInteraction: false,
						delay: 4000
					},
					//开启无限循环
					loop: true,
					//设置点击箭头
					paginationClickable: true,
					prevButton: '.swiper-button-prev',
					nextButton: '.swiper-button-next',
					//设置同屏显示的数量，默认为1，使用auto是随意的意思。
					slidesPerView: 1,
					//开启鼠标滚轮控制Swiper切换。可设置鼠标选项，或true使用默认值。
					mousewheel: true,
					//默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动可能不止一格且不会贴合。
					// freeMode:true
				},swiperOption1: {
					//显示分页
					initialSlide:0
				},
				itemflag:false,
				house_id:"",
				take_img:"",
				take_house:"",
				take_money:"",
				take_size:"",
				take_address:"",
				takeflag:true
			}
		},
		components: {
			swiper,
			swiperSlide,mymask
		},
		mounted: function() {
			this.indexnum = this.swiperlist.length;
			var userId = localStorage.getItem("userId");
			//得到house_id查询房源信息
			var house_id = localStorage.getItem("house_id");
			this.house_id = house_id;
			var _this = this;
			_this.axios.get(_this.ajaxUrls+'/api/House/houseId?house_id='+house_id).then(function(res){
				//保存自己所需信息
				_this.take_img = res.data[0].house_smallimg;
				_this.take_house = res.data[0].house_title;
				_this.take_money = res.data[0].house_totalprices;
				_this.take_size = res.data[0].house_floorspace;
				_this.take_address = res.data[0].house_detailedaddress;
				consile.log(res.data[0].id)
			}).catch(function(err){
				console.log(err)
			})
			if(userId != null && house_id != null){
				//判断是否有添加过
				_this.axios.get(_this.ajaxUrls+'/api/House/housefind?house_id='+house_id+'&userId='+userId).then(function(res){
					if(res.data.length > 0){
						$(".more").css("background-position"," -8.5rem -0.60666667rem");
						_this.takeflag = true;
					}else{
						$(".more").css("background-position"," -7.6rem -0.60666667rem");
						_this.takeflag = false;
					}				
				}).catch(function(err){
					console.log(err)
				})
			}
			
		},
		methods:{
			//添加收藏
			collect(){
				var userId = localStorage.getItem("userId");
				if(userId == null){
					this.$router.push('/user');
					$(".more").css("background-position","-7.6rem -0.60666667rem");
				}else{
					if(this.takeflag == false){
						//得到数据
						var data = {
							userId:userId,
							take_img: this.take_img,
							take_house: this.take_house,
							take_money: this.take_money,
							take_size: this.take_size,
							take_address: this.take_address,
							house_id: this.house_id
						}
						var _this = this;
						//路由post请求
						_this.axios.post(_this.ajaxUrls+'/api/House/collectUser',_this.qs.stringify(data)).then(function(res){
							console.log(res)
							//变化图片
							if(res.statusText == 'OK'){
								$(".more").css("background-position"," -8.5rem -0.60666667rem");
							}
						}).catch(function(err){
							console.log(err)
						})
					}
				}
			},
			backs:function(){
				this.$router.back();
			},
			itemshow:function(){
				this.itemflag = !this.itemflag;
			},
			//设置搜索div显示隐藏
			seting(res){
				if(res.cances == 1){
					this.open = res.flag;
				}
			},
			openserch:function(){
				this.open = true;
				this.itemflag = false;
			},
			touser:function(){
				this.$router.push("/user");
			},
			toindex:function(){
				this.$router.push("/");
			},
			tolist:function(){
				this.$router.push("/list/1");
			},
			openhid:function(index){
				this.swiperOption1.initialSlide = index;
				this.swiperflag = true;
			},
			readindex:function(index){
				this.sindex = index;
				
			}
		},
		props:["swipers"]
	}
</script>

<style scoped="scoped">
	.setitem{
		width: 2rem;
		height: 3rem;
		background: white;
		position: absolute;
		top: 0.2rem;
		right: 1rem;
		z-index: 999;
	}
	.setitem>span{
		display: block;
		width: 0.15rem;
		height: 0.15rem;
		background: white;
		transform: rotateZ(45deg);
		position: absolute;
		right: -0.05rem;
		top: 0.2rem;		
	}
	.setitem>p{
		height: 0.6rem;
		padding:0.1rem;
		box-sizing: border-box;
		font-size: 0.2rem;
		color: #666666;
	}
	.setitem>p>i{
		display: block;
	    background: url(../../../../static/image/icon_sprites.png) no-repeat;
	    background-size: 10rem 10rem;
	    width: .45333333rem;
	    height: .45333333rem;
	    vertical-align: -.06666667rem;
	    margin: 0 .06666667rem 0 0;
	    float: left;
	}
	.setitem>p>span{
		display: inline-block;
		height: 100%;
		line-height: 0.45rem;
		float: left;
	}
	.setitem>p:first-of-type>i{
		background-position: 0rem -4.29333333rem;
	}
	.setitem>p:nth-of-type(2)>i{
		background-position: -0.45rem -4.29333333rem;
	}
	.setitem>p:nth-of-type(3)>i{
		background-position: -0.9rem -4.29333333rem;
	}
	.setitem>p:nth-of-type(4)>i{
		background-position: -7.13rem -4.35rem;
	}
	.setitem>p:nth-of-type(5)>i{
		background-position: -1.36rem -4.35rem;
	}
	
	
	.swiperbox {
		width: 7.5rem;
		height: 5rem;
		background: gray;
		position: relative;
	}
	
	.swiper .swiper-slide {
		width: 7.5rem;
		height: 5rem;
	}
	
	.swiper-slide img {
		width: 7.5rem;
		height: 5rem;
	}
	
	.swiper-pagination {
		width: 1rem;
		position: absolute;
		bottom: 0.1rem;
		left: 50%;
		display: flex;
		justify-content: space-around;
		margin-left: -0.5rem;
	}
	
	.swiper-pagination>span {
		width: 0.2rem !important;
		height: 0.2rem !important;
	}
	
	.swiper-pagination-bullet-active {
		background: #ffb400 !important;
	}
	
	.swiper-top {
		width: 7.5rem;
		height: 1rem;
		display: flex;
		justify-content: space-between;
		position: absolute;
		top: 0;
		z-index: 10;
	}
	
	.swiper-top>div:first-of-type {
		width: 4.6rem;
		height: 1rem;
	}
	
	.swiper-top>div:last-of-type {
		width: 2.2rem;
		height: 1rem;
	}
	
	.fa-angle-left {
		font-size: 0.85rem;
		line-height: 1rem;
		color: #fff;
		margin-left: 0.2rem;
	}
	
	.more {
		display: block;
		width: 0.85rem;
		height: 0.85rem;
		background: url(../../../../static/imgage/icons.png) no-repeat;
		background-position: -7.6rem -0.60666667rem;
		/*background-position: -8.5rem -0.60666667rem;*/
		background-size: 10rem 10rem;
		float: right;
		margin-right: 0.2rem;
	}
	
	.heart {
		display: block;
		width: 0.85rem;
		height: 0.85rem;
		background: url(../../../../static/imgage/icons.png) no-repeat;
		background-position: -6.4rem -2.30666667rem;
		background-size: 10rem 10rem;
		float: right;
		margin-right: 0.2rem;
	}
	.partbox{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,1);
		z-index: 199;
	}	
	.closeimg{
		width: 100%;
		height: 1.5rem;
	}
	.closeimg>i{
		display: block;
	    background: url(../../../../static/image/icon_sprites.png) no-repeat;
	    background-size: 10rem 10rem;
	    background-position: -2.68rem 0;
	    width: .66666667rem;
	    height: .66666667rem;
	    position: absolute;
	    top: .4rem;
	    right: .4rem;
	}
	.imgswiper{
		width: 100%;
		height: 11.5rem;
		margin-top: 2.5rem;
	}
	.imgfooter{
		width: 7.5rem;
		height: 0.5rem;
		position: absolute;
		bottom: 0;
	}
	.imgfooter>span{
		font-size: 0.25rem;
		color: white;
		line-height: 0.5rem;
		padding: 0 0.3rem;
		box-sizing: border-box;
	}
</style>